<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 150px;
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: purple;
        margin-left: 45px;
    }

    .box {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 0 auto 200px;

        /*box-sizing: border-box;*/
        padding: 10px;
        border: 15px solid red;
    }
</style>
<body>
<div class="father">
    <div class="son"></div>
</div>
<div class="box"></div>
</body>

<script>

    /**
     * offset系列
     * 获取元素距离带有定位父元素的位置         offsetTop offsetLeft
     * 获取元素自身的大小 (宽度、高度)         offsetWidth offsetHeight
     * 注意: 返回的数值都不带单位
     */

    var father = document.querySelector('.father');
    var son = document.querySelector('.son');
    var w = document.querySelector('.box');

    // 1.可以得到元素的偏移位置, 返回的不带单位的数值
    console.log(`father.offsetTop: ${father.offsetTop}`);
    console.log(`father.offsetLeft: ${father.offsetLeft}`);

    // 它以带有定位的父亲为准, 如果没有父亲或则父亲没有定位, 则为body为准
    console.log(`son.offsetLeft: ${son.offsetLeft}`)

    // 2.可以得到元素的大小 宽度和高度  宽高度 --> 是包含padding + border + width
    console.log(`w.offsetWidth: ${w.offsetWidth}`)
    console.log(`w.offsetHeight: ${w.offsetHeight}`)

    // 3.返回带有定位的父亲 否则返回的是body
    console.log(son.offsetParent)   // div.father
    console.log(`son.offsetParent: ${son.offsetParent}`);   // son.offsetParent: [object HTMLDivElement]
    console.log(son.parentElement);  // 返回父亲 是最近以及的父亲 亲爸爸, 不管父亲有没有定位
</script>
</html>
